<template>
	<view class="page_wrapper">
		<view class="first_block">
			<view class="first_wrapper">
				<block v-if="mathExam.id === mathExamWin.winnerMathExamId">
					<image src="@/static/images/win_success.png" class="winner" mode="aspectFit"></image>
				</block>
				<block v-else>
					<image src="@/static/images/win_fail.png" class="winner" mode="aspectFit"></image>
				</block>
				
				<block v-if="mathExam.id === mathExamWin.winnerMathExamId">
					<view class="finished_txt finished_success_txt">挑战成功，恭喜成为新榜首</view>
				</block>
				<block v-else>
					<view class="finished_txt">挑战失败</view>
				</block>
				
				<view class="line"></view>
				<view class="score_block">
					<view class="score_sub_block">
						<view class="score_txt">我</view>
						<view class="score">成绩: {{mathExam.score}}</view>
						<view class="score">用时: {{mathExam.useTimeTxt}}</view>
					</view>
					<view class="score_sub_block">
						<view class="score_txt">原榜首</view>
						<view class="score">成绩: {{mathExamWin.oldWinnerScore}}</view>
						<view class="score">用时: {{mathExamWin.oldWinnerUseTimeTxt}}</view>
					</view>
				</view>
				<block v-if="mathExam.id !== mathExamWin.winnerMathExamId">
					<view style="font-size: 12px;color: #666666;margin-bottom: 10px;">
						加油，成功离你很近了~
					</view>
				</block>
				<view class="btns_block">
					<button class="show_errors" @tap="showExams()">查看试题</button>
					<button class="share_exam" open-type="share">分享挑战</button>
				</view>
			</view>
		</view>
		<view class="return_index" @tap="redirectIndex()">
			返回到擂台列表
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import {utils} from '@/utils/utils.js'
	import {storageData} from '@/utils/storageData.js'
	export default {
		data() {
			return {
				examId: 0,
				mathExam: {},
				mathExamWin: {}
			}
		},
		onLoad(option) {
			this.examId = option.examId
			// this.examId = 1092
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				// request.get( 
				// 	`/mathExams/id,${this.examId}/challenge/result`, {}
				// ).then(res => {
				// 	uni.hideLoading()
				// 	console.log(res)
				// 	this.mathExam = res
				// 	this.mathExamWin = res.mathExamWin
					
				// }).catch(err => {
				// 	uni.hideLoading()
				// 	console.log(err)
				// })
			},
			showExams() {
				uni.navigateTo({
					url: '/pages/mathExam/showMyExam?examId=' + this.examId
				})
			},
			redirectIndex: function() {
				uni.switchTab({
					url: '/pages/mathExamWin/mathExamWin'
				})
			},
			
			shareMathExamWin() {
				
			}
		},
		onShareAppMessage(res) {
			const userInfo = storageData.getLoginUser()
			if (res.from === 'button') {
					 // 来自页面内分享按钮
					 console.log(res.target);
					 return {
					 	title: '这个口算擂台的霸主很厉害，让小朋友来挑战一下吧~' ,
					 	path: '/pages/shareExam/shareExam?examId=' + this.examId + '&shareUc=' + userInfo.userCode,
					 	mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
					 	imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
					 }
			}
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		},
		onShareTimeline(res) {
			const userInfo = storageData.getLoginUser()
			return {
				title: '小奕口算：学习好帮手',
				path: '/pages/index/index?shareUc=' + userInfo.userCode,
				mpId: 'wxcbbe1a868c5c3c3c', //此处配置微信小程序的AppId
				imageUrl: 'https://www.hzif.cn/mathematics-attach/share.png'
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		background-color: cadetblue;
		align-items: center;
		.first_block{
			margin: 30px 25px;
			height: 440px;
			border: 5px solid #666666;
			border-radius: 10px;
			background-color: white;
			display: flex;
			.first_wrapper{
				width: 100%;
				margin: 10px;
				border: 1px solid #666666;
				display: flex;
				flex-direction: column;
				align-items: center;
				.winner{
					width: 100px;
				}
				.finished_txt{
					width: auto;
					font-size: 14px;
					color: white;
					height: 60px;
					padding: 0px 30px;
					background-color: darkcyan;
					border-radius: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.finished_success_txt{
					background-color: orange!important;
				}
				.line{
					width: 270px;
					margin-top: 50px;
					margin-bottom: 30px;
					border-bottom: 1px dashed #666666;
				}
				.score_block{
					width: 100%;
					margin-bottom: 20px;
					display: flex;
					justify-content: space-evenly;
					
					.score_sub_block{
						flex: 1;
						display: flex;
						flex-direction: column;
						.score{
							font-size: 17px;
							color: skyblue;
							display: flex;
							margin-bottom: 10px;
							padding-left: 20px;
						}
						.score_txt{
							font-size: 16px;
							color: #555555;
							margin-bottom: 10px;
							display: flex;
							padding-left: 20px;
						}
					}
				}
				.btns_block{
					width: 100%;
					margin-bottom: 30px;
					display: flex;
					justify-content: space-evenly;
					.show_errors{
						color: white;
						width: 100px;
						height: 40px;
						font-size: 14px!important;
						border-radius: 20px;
						background-color: orange;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.share_exam{
						color: white;
						width: 100px;
						height: 40px;
						font-size: 14px!important;
						border-radius: 20px;
						background-color: green;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
		.create_exam_win{
			width: 300px;
			height: 40px;
			color: white;
			background-color: deepskyblue;
			border-radius: 20px;
			margin-bottom: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.return_index{
			width: 300px;
			height: 40px;
			border-radius: 20px;
			color: #333333;
			background-color: white;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
